<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="0js/vue.js"></script>
</head>
<body>
<!--<div class="root">
    <h1>hello, {{name}}</h1>
</div>

<div class="root">
    <h1>hello, {{name}}</h1>
</div>-->

<div id="App">
    <h1>hello, {{name}}， {{(function dfd(){return"张三"})()}}</h1>
</div>

<script type="text/javascript">
    // 取消提示
    Vue.config.productionTip = false

    /**
     *  {{可以写js表达式}}
     {{(function (){return"张三"})()}}
     js表达式：支持
     a       a+b     demo(1)
     x === y ? 1:0
     (function (){return"张三"})()
     (function dfd(){return"张三"})()
     (()=>"df")()

     js语句 不支持
     if      switch      for     while
     */

    // 真是开发只能有一个Vue实例
    new Vue({
        el: "#App",
        data: {
            name: "vue"
        }
    });

    //root容器的代码称为 【Vue模板】
    // 配置对象的key是不能改的，用指定的
    new Vue({ // 一个实例，对应一个容器， 一对一
        // el: "#root", // 当前Vue实例为哪个容器服务， 值通常为css选择器
        el: document.getElementsByClassName("root")[0], // 还可以这样写
        // el: document.getElementById("root"), // 还可以这样写
        data: { // 存储数据，供el所指定的容器去使用， 值暂时先写成一个对象
            name: "vue"
        }
    });

    new Vue({ // 一个实例，对应一个容器， 一对一
        // el: "#root", // 当前Vue实例为哪个容器服务， 值通常为css选择器
        el: document.getElementsByClassName("root")[1], // 还可以这样写
        // el: document.getElementById("root"), // 还可以这样写
        data: { // 存储数据，供el所指定的容器去使用， 值暂时先写成一个对象
            name: "vue"
        }
    });
</script>
</body>
</html>